<template>
	<div class="zh-new-cut" style="max-width: 800px;">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/resources/video/slice-list" tag="a">切片列表</router-link></li>
				<li class="gap">&gt;</li>
			</template>
		</nav-header>
		<template v-if="showCut">
			<videoSlice :compParam.sync="compParam" :activeIndex="activeIndex"></videoSlice>
		</template>
		<div>
            <!-- 选择资源 -->
            <el-dialog
                title="选择资源"
                :visible.sync="selectResourceView"
                width="800px"
                custom-class="alBox"
                :show-close="false"
                :close-on-click-modal="false">
                <div class="releaseTK">
                    <div class="releaseTK_h clear">

                        <div class="resourceSearch fl">
                            <el-input placeholder="视频名，教师名" v-model="listParam.keyword" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="searchFunc()"></el-button>
                            </el-input>
                        </div>
                    </div>
                    <!--  -->
                    <div class="resourceData"
                        v-loading="loading.status"
                        :element-loading-text="loading.txt"
                    >	
                        <template>
                            <el-table
                            border
                            ref="multipleTable"
                            highlight-current-row
                            @cell-click="selectVideo"
                            :data="listData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            >
                                <el-table-column
                                prop="video_name"
                                label="视频名称"
                                show-overflow-tooltip
                                width="220">
                                </el-table-column>
                                <el-table-column
                                prop="category"
                                label="视频分类"
                                align='center'
                                show-overflow-tooltip
                                width="160">
                                </el-table-column>
                                <el-table-column
                                prop="user_name"
                                label="教师"
                                align='center'
                                show-overflow-tooltip
                                >
                                </el-table-column>
                                <el-table-column
                                prop="type_name"
                                label="视频信息"
                                align='center'
                                width="80"
                                show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                prop="create_time"
                                label="上传时间"
                                align='center'
                                width="180"
                                show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </template>
                        <div class="table-pagination" v-show="total_number > 10">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="listParam.page_index"
                                :page-sizes="[10, 20, 30, 40, 50, 100]"
                                :page-size="listParam.page_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total_number">
                            </el-pagination>
                            <div class="pagination-button">
                                <el-button 
                                    @click="getList"
                                    type="primary" icon="el-icon-refresh" 
                                    circle title="刷新数据" size="mini" >
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer releaseTK_btn">
                    <el-button @click="cancelNewCut">取 消</el-button>
                    <el-button type="primary" @click="comfirmVideo">确 定</el-button>
                </div>
            </el-dialog>
        </div>
	</div>
</template>
<script>
	import videoSlice from './video-list/video-slice'

  	export default {
	    data() {
	      	return {
                showCut: false,
	      		activeIndex:'1',
	      		loading:{
					status:false,
					txt:'获取数据...',
				},
	      		listData:[],
		    	listParam:{
		       		keyword: '',
		       		type:-1,
		       		page_index:1,
		       		page_size:10,
		        },
		      	total_number:0,
	      		selectResourceView:true,
	      		compParam:{
	      			editStatus:false,//是否编辑
	      			id:  0,
	      			name:'',
	      			play_url:'ffff',//播放地址
	      			length: 0 ,//时长
	      			size:0,//大小
	      		},
	      		activeName: '1',
	      		tempVideo:null
	      	};
	    },
	    created(){
			this.getList();
	    },

	    watch:{

	    },
	    mounted(){
	    	
	    },

	    methods: {
	    	comfirmVideo(){
	    		if( is_empty( this.tempVideo ) ){
	    			this.$message.warning("请选择一个视频");
	    			return false;
                }

                this.activeIndex = 21;
	    		this.selectResourceView = false;
	    		this.compParam.id = this.tempVideo.id;
	    		this.compParam.name = this.tempVideo.name;
	    		this.compParam.play_url = this.tempVideo.play_url;
                this.compParam.length = this.tempVideo.length;
                
                this.showCut = true;
	    	},
	    	cancelNewCut(){
	    		this.$router.push('/resources/video/slice-list');
	    	},
	    	selectVideo(row, column, cell, event){
	    		this.tempVideo = row;
	    		this.$refs.multipleTable.setCurrentRow(row);
	    	},
	    	getList(){
				this.loading.status  = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/video/video_list',{params: this.listParam,func:{success:success,fail:fail}})
            },
	    	/**
            * 搜索列表
            */
            searchFunc() {
                this.listParam.page_index = 1;
                this.getList();
            },
             handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
	    },
	    components: {
	    	videoSlice,

	    },
  	};
</script>
<style lang="scss">
	.videoTab{
		.el-tabs__header{
			margin: 20px 0;
		}
		.el-tabs__item.is-active{
			background: none;
			color: #409EFF;
		}
	}
	.videoTab-lx{
		max-width: 800px;
	}
	
	.zh-new-cut {
		.current-row {
			td {
				color: #fff;
				background-color: #348efc !important;
			}
        }
        
        .releaseTK_h {
            margin-bottom: 20px;
        }
	}
</style>